http://uc.org.ru/node/21

Использование поставщика аутентификации

Что бы вы ни выбрали: Facebook, GitHub или даже Google, использование провайдера для аутентификации ваших пользователей с помощью Strapi снова очень просто. В этом примере я покажу вам, как использовать его с Facebook.

Поскольку Strapi не предоставляет ( пока ) Javascript SDK для преодоления разрыва между API Strapi и API Facebook.

Вот поток :

    Пользователь нажимает на вход через Facebook
    Он перенаправляет его на другую страницу, чтобы он мог авторизовать приложение.
    После авторизации Facebook перенаправляет пользователя в ваше приложение с кодом в URL-адресе.
    Отправьте этот код в Strapi

На данный момент нам нужно реализовать только один жизненный цикл componentDidMountкоторый делает вызов API и перенаправляет пользователя в зависимости от ответа в ConnectPage контейнер:

componentDidMount() {  
  const { match: {params: { provider }}, location: { search } } = this.props;
  const requestURL = `http://localhost:1337/auth/${provider}/callback${search}`;

 request(requestURL, { method: 'GET' })
   .then((response) => {
      auth.setToken(response.jwt, true);
      auth.setUserInfo(response.user, true);
      this.redirectUser('/');
   }).catch(err => {
      console.log(err.response.payload)
      this.redirectUser('/auth/login');
   });
}

redirectUser = (path) => {  
  this.props.history.push(path);
}

Отображение провайдеров на AuthPage

Для этого нам понадобится SocialLinkкомпонент, подобный следующему:

/**
*
* SocialLink
*
*/

import React from 'react';  
import PropTypes from 'prop-types';

import Button from '../../components/Button'

function SocialLink({ provider }) {  
  return (
    <a href={`http://localhost:1337/connect/${provider}`} className="link">
      <Button type="button" social={provider}>
        <i className={`fab fa-${provider}`} />
        {provider}
      </Button>
    </a>
  );
}

SocialLink.propTypes = {  
  provider: PropTypes.string.isRequired,
};

export default SocialLink;

И нам нужно добавить его в AuthPage:

render() {  
  const providers = ['facebook', 'github', 'google', 'twitter']; // To remove a provider from the list just delete it from this array...

  return (
     <div>
       {providers.map(provider => <SocialLink provider={provider} key={provider} />)}
       {/* Some other code */}
     </div>
  );
}

Это в значительной степени то, что нам нужно сделать для внешнего приложения, теперь просто нужно настроить Strapi, чтобы включить пользовательских поставщиков

Настройка Facebook, чтобы мы могли регистрировать наших пользователей

Перейдите к разработчикам Facebook и создайте приложение под названием test.

• В разделе товаров добавьте Facebook login
• Выбирать Web
• Установленный http://localhost:3000как URL вашего веб-сайта

Скопируйте идентификатор приложения и секрет приложения со страницы панели инструментов вашего приложения.

в Facebook login> Advanced settingsдобавлять: http://localhost:1337/connect/facebook/callbackв Valid OAuth redirect URIsполе.

Настройка Страпи

Теперь, когда вы создали свое приложение на Facebook, вам нужно настроить провайдера Facebook в своем проекте.

Перейдите на вкладку «Провайдеры» раздела «Пользователи и разрешения» и заполните форму, как показано ниже:

Не забудьте сохранить изменения.

Вывод

С надеждой, что это небольшое руководство помогло вам аутентифицировать ваших пользователей с помощью React и Strapi .

На мой взгляд, делать особо нечего и очень просто! В любом случае здесь вы можете найти шаблон , который был создан с помощью приложения Create React на этих выходных.

Также еще один полный пример с использованием React Boilerplate доступный здесь, в котором также уже реализован поток аутентификации. Во втором примере используется React, Redux-Saga, а также шаблон, который мы использовали для создания администратора на Strapi .

Не стесняйтесь поделиться им и оставить свой отзыв в комментариях!